<template>
	<!-- 直播 开奖 -->
	<view class="live">
		<view class="header" :class="currentIndex == 1 ? 'active1':'' ">
			<view class="type flex-ac">
				<text class="typetext" v-for="(item,index) in typeList" :key="index" :class="{active:currentIndex == index}" @click="fnChangeType(index)">{{item}}</text>
			</view>
			<view class="content-top flex-bc" v-if="currentIndex == 0">
				<liveHead :background="background" @getDate="getDate"></liveHead>
			</view>
		</view>
		<view class="holder" :class="currentIndex == 1 ? 'holder1':'' ">

		</view>
		<view class="content" :class="currentIndex == 1 ? 'content1':'' ">
			<view class="item flex-bc" v-for="(item,index) in rewoadList" :key="index" v-if="currentIndex == 1" style="flex-direction: row;">
				<view class="reward" v-if="item.type == 1">
					<view class="reward-top flex">
						<text class="reward-title">北京11选5</text>
						<text>开奖日期：2021-01-29</text>
						<text>第21102926期</text>
					</view>
					<view class="reward-bot">
						<view class="reward-num"><text>01</text><text>06</text><text>07</text><text>21</text><text>01</text><text>06</text><text>07</text><text>21</text><text>01</text><text>06</text><text
							 style="background: #01a5ef;">07</text><text>21</text><text>01</text><text>06</text><text>07</text><text>21</text></view>
					</view>
				</view>
				<view class="reward" v-if="item.type == 2">
					<view class="reward-top flex">
						<text class="reward-title">竞猜足球</text>
						<text style="color: #333;font-size: 24rpx;">主队vs客队</text>
						<text style="color: #333;font-size: 24rpx;">2021-01-29</text>
					</view>
					<view class="reward-bot flex">
						<image src="/static/index/basketball.png" class="typeIcon"></image>
						<text class="reItem">那不勒斯</text>
						<text class="reItem">4:2</text>
						<text class="reItem">斯佩齐亚</text>
					</view>
				</view>
				<view class="reward" v-if="item.type == 3">
					<view class="reward-top flex">
						<text class="reward-title">胜负彩</text>
						<text>第21102926期</text>
					</view>
					<view class="reward-bot">
						<view class="re-num"><text>1</text><text>6</text><text>7</text><text>1</text><text>1</text><text>6</text><text>7</text><text>2</text><text>1</text><text>6</text><text>7</text><text>1</text><text>1</text><text>6</text><text>7</text><text>2</text><text>6</text><text>7</text><text>2</text></view>
					</view>
				</view>
				<uni-icons type="arrowright" size="14" color="#ccc"></uni-icons>
			</view>
		</view> 
		<liveList :listData="liveList" v-if="currentIndex == 0"></liveList>
	</view>
</template>

<script>
	var util = require('../../common/util.js')
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import liveList from "../components/liveList.vue"
	import liveHead from "../components/liveHead.vue"
	export default {
		components: {
			uniIcons,
			liveList,
			liveHead
		},
		data() {
			return {
				currentIndex: 0,
				typeList: ['竞足直播', '竞足开奖'],
				// type: 0,//0代表全部
				liveList: [],
				rewoadList: [{
					type: 1
				}, {
					type: 2
				}, {
					type: 3
				}],
				background:''
			}
		},
		onShow() {
			
		},
		methods: {
			getDate(e){
				console.log(e.date)
				uni.showToast({
					title:'加载中',
					icon:'loading'
				})
				this.request({
					url: '/czb/football_live/footballLiveList',
					method: 'POST',
					data: {
						'date': e.date,
						'type': e.type,
						'store_id': 1
				
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {
						uni.hideToast()
						this.liveList = ret.data
					}
				})
			},
			fnChangeType(_index) {
				if (this.currentIndex == _index) return
				this.currentIndex = _index
				console.log(this.currentIndex)
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	.live {
		height: 100%;
	}

	.holder {
		width: 100%;
		height: 270rpx;
	}

	.holder1 {
		height: 160rpx;
	}

	.header {
		width: 100%;
		height: 200rpx;
		background: #F22F29;
		color: #FFCECC;
		font-size: 38rpx;
		font-weight: 500;
		position: fixed;
		box-sizing: border-box;
		/*  #ifdef  H5  */
		padding-bottom: 30rpx;
		/*  #endif  */
		z-index: 9999;

		.type {
			height: 100%;

			.active {
				color: #FFFFFF;
				font-size: 46rpx;
			}
		}

		.content-top {
			position: absolute;
			left: 0;
			height: 108rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			top: 162rpx;
			box-sizing: border-box;
			color: #333;
			font-size: 24rpx;
			z-index: 9999;
		}
	}

	.active1 {
		height: 160rpx;
		/*  #ifdef  APP-PLUS  */
		padding-top: 30rpx;
		/*  #endif  */
		/*  #ifdef  H5  */
		padding-bottom: 0;
		/*  #endif  */
	}

	.content {
		width: 100%;
		max-height: calc(100% - 270rpx);
		background: #fff;
		overflow-y: scroll;

		.item {
			width: 100%;
			padding: 32rpx 30rpx;
			box-sizing: border-box;
			border-top: 1rpx solid #F5F6F8;
			min-height: 153rpx;
			flex-direction: column;
			font-size: 28rpx;
			color: $uni-text-color;
			position: relative;

			.text {
				font-size: 20rpx;
				color: #A3A3A3;
			}

			.mid {
				margin-top: 20rpx;

				text {
					padding: 0 10rpx;
				}

				.reduGrade {
					padding: 4rpx 6rpx;
					background: #FF8021;
					border-radius: 4rpx;
					color: #fff;
					font-size: 22rpx;
				}

				.redNum {
					padding: 4rpx 6rpx;
					background: #ED555E;
					border-radius: 4rpx;
					color: #fff;
					font-size: 22rpx;
					margin: 0 10rpx;
				}

				.vs {
					font-size: 36rpx;
					padding: 0 10rpx;
				}

				.grade {
					color: #ED555E;
					font-size: 40rpx;
					padding: 0 20rpx;
				}
			}

			.reduce {
				color: #999;
				font-size: 22rpx;
			}

			.left {
				position: absolute;
				left: 30rpx;
				top: 32rpx;
				font-size: 24rpx;
				color: #A3A3A3;

			}

			.right {
				position: absolute;
				right: 30rpx;
				bottom: 32rpx;
				width: 36rpx;
				height: 36rpx;
			}

			.reward {
				margin-right: 20rpx;
			}

			.reward-top {
				align-items: center;
				margin-bottom: 10rpx;

				text {
					margin-right: 40rpx;
					font-size: 22rpx;
					color: #777;
				}

				.reward-title {
					font-size: 28rpx;
					color: #333;
				}
			}

			.reward-bot {
				align-items: center;

				.typeIcon {
					width: 50rpx;
					height: 50rpx;
				}

				.reItem {
					margin-left: 40rpx;
				}

				.reward-num {
					display: flex;
					flex-wrap: wrap;

					text {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						background: #fa534b;
						text-align: center;
						line-height: 46rpx;
						color: #fff;
						font-size: 24rpx;
						margin: 10rpx 8rpx 10rpx 0;
					}
				}

				.re-num {
					display: flex;
					flex-wrap: wrap;

					text {
						width: 26rpx;
						height: 40rpx;
						border-radius: 4rpx;
						background: #28C83E;
						color: #fff;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
						margin: 6rpx 8rpx 6rpx 0;
					}
				}
			}
		}
	}

	.content1 {
		max-height: calc(100% - 160rpx);
	}
</style>
